<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animation: Unfold</title>
    <meta name="description" content="Animation: Unfold - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #ECECEC">
      <a-assets>
        <a-mixin id="board" geometry="depth: .05; height: 1; width: 6" material="shader: flat" pivot="0 0.5 0" position="0 -1 0"></a-mixin>
        <a-mixin id="unhinge" animation="property: rotation; to: 0 0 0; dur: 1000"></a-mixin>
        <img id="shadow" src="../../assets/img/radial-shadow-2.png">
      </a-assets>

      <!-- Series of nested boards that unfold one by one. -->
      <a-entity position="0 3 -8" scale="1 1 1"
                animation__position="attribute: position; to: 0 5 -8; dur: 2000"
                animation__rotation="property: rotation; from: 0 60 0; to: 0 30 0; dur: 2500">

        <!-- Pivot and position are used to set the "hinge" of each board to it's top edge. -->
        <a-box mixin="board unhinge" color="#F16745" rotation="-20 0 0" animation="delay: 1000">
          <a-box mixin="board unhinge" color="#FFC65D" rotation="-175 0 0" animation="delay: 250">
            <a-box mixin="board unhinge" color="#7BC8A4" rotation="-180 0 0" animation="delay: 500">
              <a-box mixin="board unhinge" color="#4CC3D9" rotation="-180 0 0" animation="delay: 750">
                <a-box mixin="board unhinge" color="#93648D" rotation="-180 0 0" animation="delay: 1000">
              </a-box>
            </a-box>
          </a-box>
        </a-box>
      </a-entity>

      <a-image position="0 -1 0" src="#shadow" rotation="-90 0 0" scale="6 6 6"></a-image>
      <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
      <a-light type="ambient" color="#fff"></a-light>
    </a-scene>
  </body>
</html>
